// 系统消息

<template>
  <div class="message">
    <div class="fl">
      <div class="title">
        <img src="@/assets/image/news_system_icon@2x.png" alt />
        <span>系统消息</span>
      </div>
    </div>
    <div class="fr">
      <p class="time">2019-12-9 12:12:12</p>
      <div class="content" v-for="(item, index) in messages" :key="index">
        <p>{{item.title}}</p>
        <p>{{item.content}}</p>
      </div>
      <p>没有更多消息</p>
    </div>
  </div>
</template>

<script>
// 获取消息列表
import { getMessageList } from "@/request/personnel";
export default {
  data() {
    return {
      messages: []
    };
  },
  created() {
    getMessageList({
      token: this.$token,
      type: 0 // 0代表获取系统消息
    }).then(res => {
      this.messages = res.data.data
      console.log(this.messages)
    });
  }
};
</script>

<style lang="less" scoped>
.message {
  width: 1202px;
  height: 967px;
  border: 1px solid #e6e6e6;
  margin: 30px auto;
  background: #fff;
}
.fl {
  width: 260px;
  height: 967px;
  background-color: #65f8d5;
  .title {
    height: 80px;
    background: rgba(255, 255, 255, 0.5);
    img {
      margin-top: 15px;
      margin-left: 15px;
      vertical-align: -15px;
    }
    span {
      color: #313131;
      margin-left: 15px;
    }
  }
}
.fr {
  width: 940px;
  height: 967px;
  > p {
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #616161;
  }
  .content {
    width: 660px;
    height: 139px;
    margin: 0 auto;
    background: #f5f5f5;
    p {
      padding: 0 20px;
    }
    p:nth-child(1) {
      height: 65px;
      line-height: 65px;
      font-size: 24px;
      color: #000;
      border-bottom: 1px solid #e6e6e6;
    }
    p:nth-child(2) {
      height: 65px;
      line-height: 65px;
    }
  }
}
</style>
